<template>
  <view :class="{ 'custom-head': true, 'pt-50rpx': isIndex }">
    <mt-navbar v-if="!isIndex" :fixed="false" :show-back="false" :title="title" bg-color="#eaeff5">
      <template #right>
        <image
          class="w-48rpx h-48rpx"
          src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-config.svg"
          @click="handleEdit"
        ></image>
        <!--暂时屏蔽消息模块-->
        <!-- <mt-message-bell> </mt-message-bell> -->
      </template>
    </mt-navbar>
    <view :class="['info', 'flex', { 'pt-24rpx': isIndex }]">
      <view :class="{ 'info-left': true, 'flex-items-center': isIndex }">
        <image
          :class="{ 'avatar100': !isIndex, 'avatar80': isIndex }"
          :src="userInfo.avatarUrl ? userInfo.avatarUrl : 'https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/default_avatar.png'"
        ></image>
        <view class="info-text flex pl-20rpx">
          <view class="flex">
            <view :class="{ 'title40': !isIndex, 'title32': isIndex, 'ellipsis': true, 'text-#1C213E': true }">
              {{ userInfo.providerName || '默认昵称' }}
            </view>
          </view>

          <view v-if="!isIndex" class="sub-title flex flex-wrap">
            <view v-if="userInfo.registerProvinceName" class="item px-16rpx py-4rpx text-#1C213E text-24rpx mb-8rpx">{{
              userInfo.registerProvinceName
            }}</view>
            <view v-if="userInfo.memberFlag" class="item member px-16rpx py-4rpx text-#1C213E text-24rpx mb-8rpx">
              <image
                class="w-24rpx h-24rpx pr-8rpx"
                src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-crown.svg"
              ></image>
              <text>VIP</text>
            </view>
            <view
              v-if="userInfo.channelProviderFlag === 1 && userInfo.goldChannelFlag !== 1"
              class="item px-16rpx py-4rpx text-#1C213E text-24rpx mb-8rpx"
            >
              <text>盟友</text>
            </view>
            <view v-if="userInfo.goldChannelFlag === 1" class="item member px-16rpx py-4rpx text-#1C213E text-24rpx mb-8rpx">
              <image
                class="w-24rpx h-24rpx pr-8rpx"
                src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-channel-agent.svg"
              ></image>
              <text>盟友合伙人</text>
            </view>
          </view>
          <view v-else class="text-#727687 text-24rpx">欢迎使用易盟APP</view>
        </view>
      </view>
      <view class="info-right">
        <view v-if="!isIndex" @click="handleEdit">
          <!-- <uv-icon
            name="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/ym-arrow-right.svg"
            class="pl-10rpx"
            color="#999999"
            size="24"
          ></uv-icon> -->
        </view>
        <!--暂时屏蔽消息模块-->
        <!-- <mt-message-bell v-if="isIndex"> </mt-message-bell> -->
        <!-- <mt-button class="edit-info rd-50%" :shake="false" :plain="true" @click="handleEdit">编辑资料</mt-button> -->
      </view>
    </view>
    <view v-if="!isIndex" class="footer flex mt-24rpx ml-150rpx">
      <!-- <view class="flex flex-items-center" @click="handleContributionDetails">
        <text class="text-#1C213E text-32rpx">{{ userInfo.contributionValue ? userInfo.contributionValue : 0 }}</text>
        <text class="text-#727687 text-24rpx pl-16rpx">贡献值</text>
      </view> -->
      <view v-if="userInfo.serviceProviderFlag === 1" class="flex flex-items-center mb-24rpx">
        <block v-if="Number(userInfo.bailAmount) < Number(userInfo.bailWarnAmount)">
          <text class="text-#F94B4A text-32rpx">{{ amountTransfer(userInfo.bailAmount, 0) }}</text>
          <uv-icon
            size="18"
            class="pl-8rpx"
            name="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-warning.svg"
            @click="handleRechargeDeposit"
          ></uv-icon>
        </block>
        <text v-else class="text-#1C213E text-32rpx">{{ amountTransfer(userInfo.bailAmount, 0) }}</text>
        <text class="text-#727687 text-24rpx pl-16rpx mt-4rpx" @click="handleToRecharge">保证金</text>
      </view>
    </view>
    <!--保证金弹窗-->
    <mt-modal ref="bondRef" class="bond-container">
      <view class="font-bold flex flex-items-center text-#1C213E text-32rpx mb-48rpx" @click="handleCloseBond">
        <view class="flex">
          <uv-icon size="18" class="pl-8rpx" name="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-warning.svg"></uv-icon>
          <text class="pl-8rpx">保证金不足</text>
        </view>
        <!-- <uv-icon size="18" class="close" color="#ADB0BD" name="close-circle-fill" @click="handleRechargeDeposit"></uv-icon> -->
      </view>
      <view class="text-#1A1A1A text-32rpx mb-32rpx">保证金额不足，为保证您的接单、产品发布等权益，请及时充值！</view>
    </mt-modal>
  </view>
</template>

<script name="CustomHead" setup>
import { getProvinceInfo } from '@/api/index.js';
import { amountTransfer } from '@/utils/tools.js';

import userStore from '@/store/user';
const user = userStore();

const props = defineProps({
  title: {
    type: String,
    default: '首页'
  },
  bgColor: {
    type: String,
    default: '#eaeff5'
  },
  // 是否为首页
  isIndex: {
    type: Boolean,
    default: false
  }
});

const userInfo = ref({});

// 保证金充值dom
const bondRef = ref(null);

const handleEdit = () => {
  uni.navigateTo({
    url: '/pages/index/personal'
  });
};

// 获取用户信息
const getUserInfo = () => {
  getProvinceInfo().then((res) => {
    userInfo.value = res.data;
    user.setUserInfo(res.data);
  });
};

// 充值保证金
const handleRechargeDeposit = () => {
  const options = {
    cancelText: '再想想',
    confirmText: '去充值',
    slot: true,
    showTitle: false,
    success: async (e) => {
      if (e.confirm) {
        bondRef.value.close();
        uni.navigateTo({
          url: '/subBond/pages/rechargeDeposit'
        });
      }
    }
  };
  bondRef.value.open(options);
};

// 去充值保证金页面
const handleToRecharge = () => {
  uni.navigateTo({
    url: '/subBond/pages/rechargeDeposit'
  });
};

// 贡献值明细
const handleContributionDetails = () => {
  uni.navigateTo({
    url: '/pages/index/contributionDetails'
  });
};

// 关闭弹窗
const handleCloseBond = () => {
  bondRef.value.close();
};

onShow(() => {
  getUserInfo();
});
</script>

<style lang="scss" scoped>
.custom-head {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  user-select: none;
  z-index: 90;
  background-color: #eaeff5;
  .info {
    min-height: 96rpx;
    &-left {
      flex: 3;
      display: flex;
      .info-text {
        display: flex;
        flex-direction: column;
        // justify-content: space-around;
        .title40 {
          font-size: 40rpx;
          max-width: 430rpx;
        }
        .title32 {
          font-size: 32rpx;
          max-width: 430rpx;
        }
        .sub-title {
          margin-top: 16rpx;
          .item {
            background: rgba(255, 255, 255, 0.5);
            border-radius: 4px 4px 4px 4px;
            margin-right: 8rpx;
          }
          .member {
            background: linear-gradient(90deg, #ead095 0%, #d5b27c 100%);
            color: #fff;
            display: flex;
            justify-content: space-around;
            align-items: center;
          }
        }
      }
      .avatar100 {
        width: 120rpx;
        height: 120rpx;
        min-width: 120rpx;
        border-radius: 120rpx;
        border: 2rpx solid #fff;
      }
      .avatar80 {
        width: 70rpx;
        height: 70rpx;
        min-width: 70rpx;
        border-radius: 70rpx;
        border: 2rpx solid #fff;
      }
    }
    &-right {
      // flex: 1;
      // width: 100rpx;
      height: 100rpx;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      .edit-info {
        border-radius: 190rpx 0 0 190rpx;
        border: 1px solid #d7dbe1;
        width: 169rpx;
        height: 58rpx;
        position: absolute;
        right: 0;
        font-weight: 600;
        font-size: 14px;
        color: #1c213e;
        display: flex;
        justify-content: space-around;
        align-items: center;
        background-color: #fff;
      }
    }
  }
}

.close {
  position: absolute;
  right: 126rpx;
}
</style>
